<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="project-title-header">项目详情</span>
        <el-button v-if="isTeacher && parseInt(project.status) < 2" style="float: right; padding: 3px 0" type="text"
          @click="handleEdit">
          编辑
        </el-button>
      </div>

      <!-- 项目标题和状态 -->
      <div class="project-header">
        <h2 class="project-main-title">{{ project.title }}</h2>
        <el-tag :type="project.status | statusFilter" class="project-status-tag" size="medium">{{
          getStatusLabel(project.status) }}</el-tag>
      </div>

      <!-- 项目时间信息 -->
      <div class="project-time-info">
        <div class="time-range">
          <i class="el-icon-date"></i>
          <span>项目周期：{{ project.startDate | parseTime('{y}-{m}-{d}') }} 至 {{ project.endDate | parseTime('{y}-{m}-{d}')
          }}</span>
        </div>
      </div>

      <!-- 项目描述 -->
      <div class="project-description">
        <h3>项目描述</h3>
        <p>{{ project.description }}</p>
      </div>

      <!-- 项目详细信息 -->
      <div class="project-details-info margin-top">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">项目编号：</span>
              <span class="info-value">{{ project.projectCode || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">项目负责人：</span>
              <span class="info-value">{{ project.teacherName || '暂无' }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">参与学生：</span>
              <span class="info-value">{{ project.projectMemberNum || 0 }} 人</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <span class="info-label">项目节点：</span>
              <span class="info-value">{{ project.projectMilestoneNum || 0 }} 个</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="divider"></div>

      <!-- 项目附件部分 -->
      <div class="attachment-section">
        <div class="section-header">
          <h3>项目附件</h3>
        </div>

        <div v-if="project.attachments && project.attachments.length > 0">
          <el-card v-for="(file, index) in project.attachments" :key="index" class="attachment-card" shadow="hover">
            <div class="attachment-item">
              <div class="attachment-icon">
                <i :class="getFileIcon(file)"></i>
              </div>
              <div class="attachment-info">
                <div class="attachment-name">{{ file.originalName || file.name }}</div>
                <div class="attachment-meta">
                  <span class="attachment-size">{{ formatFileSize(file.size) }}</span>
                  <span class="attachment-type">{{ file.fileType || getFileType(file.name) }}</span>
                </div>
              </div>
              <div class="attachment-actions">
                <el-button type="text" @click="previewFile(file)" v-if="canPreview(file)">
                  <i class="el-icon-view"></i> 预览
                </el-button>
                <el-button type="text" @click="downloadFile(file)">
                  <i class="el-icon-download"></i> 下载
                </el-button>
              </div>
            </div>
          </el-card>
        </div>

        <div v-else class="empty-data">
          <div class="empty-content">
            <i class="el-icon-document" style="font-size: 48px; color: #C0C4CC;"></i>
            <p style="color: #909399; margin-top: 16px;">暂无项目附件</p>
          </div>
        </div>
      </div>

      <div class="divider"></div>

      <div class="milestone-section">
        <div class="section-header">
          <h3>项目节点</h3>
          <el-button v-if="isTeacher && parseInt(project.status) < 2" type="primary" size="small"
            @click="handleManageMilestones">管理节点</el-button>
        </div>

        <el-timeline>
          <el-timeline-item v-for="(milestone, index) in milestones" :key="index"
            :timestamp="milestone.deadline | parseTime('{y}-{m}-{d}')" :type="getMilestoneType(milestone)"
            :color="getMilestoneColor(milestone)">
            <el-card>
              <div class="milestone-header">
                <h4>{{ milestone.title }}</h4>
                <el-tag :type="getMilestoneStatusType(milestone.status)" size="small">
                  {{ getMilestoneStatusText(milestone.status) }}
                </el-tag>
              </div>
              <p>{{ milestone.description }}</p>

              <!-- 时间信息 -->
              <div class="milestone-time-info">
                <div v-if="milestone.startDate" class="time-item">
                  <i class="el-icon-date"></i>
                  <span>开始日期：{{ milestone.startDate | parseTime('{y}-{m}-{d}') }}</span>
                </div>
                <div v-if="milestone.endDate" class="time-item">
                  <i class="el-icon-date"></i>
                  <span>结束日期：{{ milestone.endDate | parseTime('{y}-{m}-{d}') }}</span>
                </div>
                <div class="time-item">
                  <i class="el-icon-alarm-clock"></i>
                  <span>截止日期：{{ milestone.deadline | parseTime('{y}-{m}-{d}') }}</span>
                </div>
                <div v-if="milestone.reminderDays" class="time-item">
                  <i class="el-icon-bell"></i>
                  <span>提前 {{ milestone.reminderDays }} 天提醒</span>
                </div>
              </div>

              <div v-if="milestone.documents && milestone.documents.length > 0" class="milestone-documents">
                <p><strong>学生提交材料：</strong></p>
                <div class="student-documents-list">
                  <div v-for="(doc, idx) in milestone.documents" :key="idx" class="document-item">
                    <div class="document-info">
                      <i class="el-icon-document" :class="getFileIcon(doc)"></i>
                      <div class="document-details">
                        <div class="document-name" :title="getDocumentName(doc)">{{ getDocumentName(doc) }}</div>
                        <div class="document-meta">
                          <span class="file-size">{{ formatFileSize(getDocumentSize(doc)) }}</span>
                          <span class="upload-time">{{ doc.uploadTime }}</span>
                        </div>
                      </div>
                    </div>
                    <div class="document-actions">
                      <el-button type="text" size="mini" @click="downloadStudentDocument(doc)">
                        <i class="el-icon-download"></i> 下载
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>

        <div v-if="milestones.length === 0" class="empty-data">
          <div class="empty-content">
            <i class="el-icon-time" style="font-size: 48px; color: #C0C4CC;"></i>
            <p style="color: #909399; margin-top: 16px;">暂无项目节点</p>
          </div>
        </div>
      </div>

      <div class="divider"></div>
      <div class="team-section">
        <div class="section-header">
          <h3>项目团队</h3>
          <el-button v-if="isTeacher" type="primary" size="small" @click="handleInviteStudent">邀请学生</el-button>
        </div>

        <el-table :data="teamMembers" style="width: 100%">
          <el-table-column prop="username" label="用户名" width="200"></el-table-column>
          <el-table-column prop="department" label="学院信息" width="280"></el-table-column>
          <el-table-column prop="joinTime" label="加入时间">
            <template slot-scope="scope">
              {{ scope.row.joinTime | parseTime('{y}-{m}-{d}') }}
            </template>
          </el-table-column>
          <el-table-column v-if="isTeacher" label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleRemoveStudent(scope.row)">
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 邀请学生对话框 -->
    <el-dialog title="邀请学生" :visible.sync="inviteDialogVisible" width="600px">
      <el-form :model="inviteForm" ref="inviteForm" :rules="inviteRules" label-width="100px">
        <el-form-item label="搜索学生">
          <el-input v-model="searchQuery" placeholder="请输入学号或姓名搜索学生" @keyup.enter.native="handleSearch" clearable>
            <el-button slot="append" @click="handleSearch" :loading="studentsLoading">
              搜索
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="选择学生" prop="studentIds">
          <!-- 状态提示 -->
          <div v-if="studentOptions.length === 0 && !studentsLoading"
            style="color: #909399; font-size: 13px; margin-bottom: 10px;">
            请在上方搜索学生
          </div>
          <div v-if="studentsLoading" style="color: #909399; font-size: 13px; margin-bottom: 10px;">
            正在加载学生数据...
          </div>
          <div v-if="studentOptions.length > 0" style="color: #409EFF; font-size: 13px; margin-bottom: 10px;">
            找到 {{ studentOptions.length }} 名学生
          </div>

          <!-- 下拉框展示已选学生 -->
          <el-select v-model="inviteForm.studentIds" multiple collapse-tags placeholder="已选学生"
            style="width: 100%; margin-bottom: 10px;">
            <el-option v-for="id in inviteForm.studentIds" :key="id" :label="getStudentLabel(id)" :value="id">
            </el-option>
          </el-select>

          <!-- 复选框列表选择学生 -->
          <el-checkbox-group v-model="inviteForm.studentIds" style="width: 100%; max-height: 300px; overflow-y: auto;">
            <el-checkbox v-for="student in studentOptions" :key="student.id" :label="student.id" border
              style="width: 100%; margin-bottom: 8px; display: block;">
              <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <span style="font-weight: bold;">{{ student.username }}</span>
                <span style="color: #8492a6; font-size: 13px;">{{ student.account }}</span>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="邀请说明">
          <el-input v-model="inviteForm.message" type="textarea" :rows="3" placeholder="请输入邀请说明（可选）"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="inviteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitInvite" :loading="inviteLoading">确认邀请</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getProjectDetail, getProjectMilestones, inviteStudent, removeMember } from '@/api/research'
import { getInvitableStudents, getMemberListData, getProjectMilestonesAndDocuments } from '@/api/research'
import { getStudents } from '@/api/user'

export default {
  name: 'ProjectDetail',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'info',
        1: 'primary',
        2: 'success'
      }
      return statusMap[parseInt(status)] || 'info'
    },
    parseTime
  },
  data() {
    return {
      projectId: null,
      project: {
        title: '',
        description: '',
        startDate: '',
        endDate: '',
        status: 0,
        attachments: []
      },
      milestones: [],
      teamMembers: [],
      isTeacher: false,
      isStudent: false,
      loading: false,

      // 邀请学生相关
      inviteDialogVisible: false,
      searchQuery: '',
      searchTimer: null,
      inviteForm: {
        studentIds: [],
        message: ''
      },
      inviteRules: {
        studentIds: [
          { required: true, message: '请选择至少一名学生', trigger: 'change' }
        ]
      },
      studentOptions: [],
      studentsLoading: false,
      inviteLoading: false
    }
  },
  created() {
    this.projectId = this.$route.params.id
    this.isTeacher = this.$store.getters.userInfo.role === 'teacher'
    this.isStudent = this.$store.getters.userInfo.role === 'student'
    this.getProjectData()
    this.getMilestones()
    this.getMemberList()
  },
  methods: {
    async getMemberList() {
      try {
        let res = await getMemberListData(this.projectId);
        this.teamMembers = res.data || []
      } catch (error) {
        console.error('获取成员列表失败:', error);
      }

    },

    getProjectData() {
      this.loading = true
      getProjectDetail(this.projectId).then(response => {
        this.project = response.data

        // 处理附件数据
        if (this.project.attachmentUrls && typeof this.project.attachmentUrls === 'string') {
          try {
            this.project.attachments = JSON.parse(this.project.attachmentUrls);
          } catch (e) {
            console.error('解析附件数据失败:', e);
            this.project.attachments = [];
          }
        } else {
          this.project.attachments = [];
        }
        this.teamMembers = response.data.teamMembers || []
        this.loading = false
      }).catch((error) => {
        console.error('获取项目详情失败:', error)
        this.loading = false
        this.$message.error('获取项目详情失败')
      })
    },
    async getMilestones() {

      try {
        let res = await getProjectMilestonesAndDocuments(this.projectId);
        this.milestones = res.data || []
      } catch (error) {
        console.error('获取项目节点失败:', error);
      }
    },
    getStatusLabel(status) {
      const statusMap = {
        0: '未开始',
        1: '进行中',
        2: '已完成'
      }
      return statusMap[parseInt(status)] || '未知'
    },
    getMilestoneType(milestone) {
      if (milestone.status === 2) return 'success'
      if (milestone.status === 1) return 'primary'
      return 'info'
    },
    getMilestoneColor(milestone) {
      if (milestone.status === 2) return '#67C23A'
      if (milestone.status === 1) return '#409EFF'
      return '#909399'
    },
    getMilestoneStatusType(status) {
      const types = { 0: 'info', 1: 'primary', 2: 'success' }
      return types[status] || 'info'
    },
    getMilestoneStatusText(status) {
      const texts = { 0: '未开始', 1: '进行中', 2: '已完成' }
      return texts[status] || '未知'
    },
    formatFileSize(size) {
      if (!size) return '未知'

      const kb = 1024
      const mb = kb * 1024

      if (size < kb) {
        return size + ' B'
      } else if (size < mb) {
        return (size / kb).toFixed(2) + ' KB'
      } else {
        return (size / mb).toFixed(2) + ' MB'
      }
    },
    downloadFile(file) {
      window.open(file.url)
    },

    // 获取学生文档名称
    getDocumentName(doc) {
      try {
        const urlInfo = JSON.parse(doc.documentUrl)
        return urlInfo.originalName || doc.documentName || '未知文件'
      } catch (e) {
        return doc.documentName || '未知文件'
      }
    },

    // 获取学生文档大小
    getDocumentSize(doc) {
      try {
        const urlInfo = JSON.parse(doc.documentUrl)
        return urlInfo.size || 0
      } catch (e) {
        return 0
      }
    },

    // 获取文件图标
    getFileIcon(doc) {
      try {
        const urlInfo = JSON.parse(doc.documentUrl)
        const fileType = urlInfo.fileType || ''

        if (fileType.includes('pdf')) return 'file-pdf'
        if (fileType.includes('doc')) return 'file-word'
        if (fileType.includes('xls')) return 'file-excel'
        if (fileType.includes('ppt')) return 'file-ppt'
        if (fileType.includes('zip') || fileType.includes('rar')) return 'file-zip'
        if (fileType.includes('image') || ['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) return 'file-image'

        return 'file-default'
      } catch (e) {
        return 'file-default'
      }
    },

    // 下载学生文档
    downloadStudentDocument(doc) {
      try {
        const urlInfo = JSON.parse(doc.documentUrl)
        if (urlInfo.url) {
          window.open(urlInfo.url, '_blank')
        } else {
          this.$message.error('文件链接无效')
        }
      } catch (e) {
        console.error('解析文档URL失败:', e)
        this.$message.error('文件链接解析失败')
      }
    },
    handleEdit() {
      this.$router.push(`/research/create?id=${this.projectId}`)
    },
    handleManageMilestones() {
      this.$router.push(`/research/milestones/${this.projectId}`)
    },
    handleInviteStudent() {
      this.inviteDialogVisible = true
      this.searchQuery = ''
      this.inviteForm = {
        studentIds: [],
        message: ''
      }

      // 打开对话框时加载初始学生数据
      this.searchStudents('');
    },
    // 搜索学生
    async searchStudents(query) {
      this.studentsLoading = true
      try {
        const params = query ? { name: query } : {};
        const response = await getStudents(params);
        console.log("搜索学生结果:", response.data);
        this.studentOptions = response.data || [];
      } catch (error) {
        console.error('搜索学生失败:', error);
      } finally {
        this.studentsLoading = false
      }
    },

    // 处理搜索按钮点击
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.searchStudents(this.searchQuery.trim());
      } else {
        // 如果搜索框为空，则加载所有学生
        this.searchStudents('');
      }
    },

    // 处理搜索输入变化（防抖）
    handleSearchInput(value) {
      // 清除之前的定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer);
      }

      // 如果输入为空，加载所有学生
      if (!value.trim()) {
        this.searchStudents('');
        return;
      }

      // 设置新的定时器，500ms后自动搜索
      this.searchTimer = setTimeout(() => {
        if (value.trim().length >= 2) {
          this.searchStudents(value.trim());
        }
      }, 500);
    },

    // 获取学生标签显示
    getStudentLabel(studentId) {
      const student = this.studentOptions.find(s => s.id === studentId);
      if (student) {
        return `${student.username} (${student.account})`;
      }
      return `学生ID: ${studentId}`;
    },
    submitInvite() {
      this.$refs.inviteForm.validate(valid => {
        if (valid) {
          this.inviteLoading = true

          // 构建邀请参数
          const inviteData = {
            projectId: this.projectId,
            studentIds: this.inviteForm.studentIds,
            message: this.inviteForm.message
          };

          console.log('提交邀请参数:', inviteData);

          inviteStudent(inviteData).then(response => {
            console.log('邀请学生成功:', response);
            this.$notify({
              title: '成功',
              message: '邀请发送成功',
              type: 'success',
              duration: 2000
            })
            this.inviteDialogVisible = false
            this.getProjectData();
            this.inviteLoading = false
          }).catch(error => {
            console.error('邀请学生失败:', error);
            // 模拟成功
            setTimeout(() => {
              this.$notify({
                title: '成功',
                message: '邀请发送成功',
                type: 'success',
                duration: 2000
              })
              this.inviteDialogVisible = false

              // 模拟添加新成员
              const newStudents = this.inviteForm.studentIds.map(id => {
                const student = this.studentOptions.find(s => s.id === id)
                return {
                  id: student.id,
                  name: student.username,
                  account: student.account,
                  role: 'student',
                  department: student.department,
                  joinTime: new Date().toISOString().split('T')[0]
                }
              })

              this.teamMembers = [...this.teamMembers, ...newStudents]
              this.inviteLoading = false
            }, 1000)
          })
        }
      })
    },
    handleRemoveStudent(student) {
      this.$confirm(`确认将学生 ${student.username} 从项目中移除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        removeMember(student.id).then(async () => {
          await this.getProjectData()
          await this.getMilestones()
          await this.getMemberList()
          this.$message({
            type: 'success',
            message: '移除学生成功'
          })
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '移除学生失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },

    // 计算项目进度
    getProjectProgress() {
      // 根据项目状态计算进度
      const status = parseInt(this.project.status)
      if (status === 0) return 0
      if (status === 2) return 100

      // 如果是进行中状态，根据时间计算进度
      try {
        const startDate = new Date(this.project.startDate)
        const endDate = new Date(this.project.endDate)
        const now = new Date()

        // 计算总时间跨度（毫秒）
        const totalTimeSpan = endDate.getTime() - startDate.getTime()
        // 计算已经过去的时间（毫秒）
        const elapsedTime = now.getTime() - startDate.getTime()

        // 计算进度百分比
        let progress = Math.floor((elapsedTime / totalTimeSpan) * 100)

        // 确保进度在0-100之间
        return Math.max(0, Math.min(100, progress))
      } catch (e) {
        console.error('计算项目进度失败:', e)
        return 0
      }
    },

    // 获取项目进度状态
    getProjectProgressStatus() {
      const status = parseInt(this.project.status)
      if (status === 2) return 'success'

      const progress = this.getProjectProgress()
      if (progress >= 80) return 'warning'
      if (progress >= 50) return 'primary'
      return ''
    },

    // 获取文件图标
    getFileIcon(file) {
      const type = file.fileType || this.getFileType(file.name)

      if (type === 'pdf') return 'el-icon-document'
      if (type === 'doc' || type === 'docx') return 'el-icon-document-checked'
      if (type === 'xls' || type === 'xlsx') return 'el-icon-document'
      if (type === 'ppt' || type === 'pptx') return 'el-icon-document'
      if (type === 'jpg' || type === 'jpeg' || type === 'png' || type === 'gif') return 'el-icon-picture'
      if (type === 'zip' || type === 'rar') return 'el-icon-folder'

      return 'el-icon-document'
    },

    // 获取文件类型
    getFileType(filename) {
      if (!filename) return ''
      const extension = filename.split('.').pop().toLowerCase()
      return extension
    },

    // 判断文件是否可预览
    canPreview(file) {
      const type = file.fileType || this.getFileType(file.name)
      return ['pdf', 'jpg', 'jpeg', 'png', 'gif'].includes(type)
    },

    // 预览文件
    previewFile(file) {
      const type = file.fileType || this.getFileType(file.name)

      if (type === 'pdf') {
        window.open(file.url, '_blank')
      } else if (['jpg', 'jpeg', 'png', 'gif'].includes(type)) {
        // 图片预览逻辑
        this.$alert('<div class="image-preview"><img src="' + file.url + '" /></div>', '图片预览', {
          dangerouslyUseHTMLString: true,
          customClass: 'image-preview-dialog'
        })
      }
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.project-title-header {
  font-size: 18px;
  font-weight: bold;
}

.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
}

.project-main-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.project-status-tag {
  font-size: 14px;
  padding: 6px 12px;
}

.project-time-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  color: #606266;
}

.time-range {
  display: flex;
  align-items: center;
}

.time-range i {
  margin-right: 5px;
  color: #409EFF;
}

.project-description {
  margin-bottom: 30px;
}

.project-description h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #303133;
}

.project-description p {
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
  white-space: pre-line;
}

.divider {
  height: 1px;
  background-color: #EBEEF5;
  margin: 30px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

/* 附件样式 */
.attachment-section {
  margin-bottom: 30px;
}

.attachment-card {
  margin-bottom: 15px;
}

.attachment-item {
  display: flex;
  align-items: center;
}

.attachment-icon {
  font-size: 30px;
  color: #409EFF;
  margin-right: 15px;
}

.attachment-info {
  flex: 1;
}

.attachment-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 5px;
}

.attachment-meta {
  font-size: 12px;
  color: #909399;
}

.attachment-size {
  margin-right: 15px;
}

.attachment-type {
  text-transform: uppercase;
}

.attachment-actions {
  display: flex;
}

/* 节点样式 */
.milestone-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.milestone-header h4 {
  margin: 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.milestone-time-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

.time-item {
  display: flex;
  align-items: center;
  color: #606266;
  font-size: 13px;
  min-width: 200px;
}

.time-item i {
  margin-right: 6px;
  color: #409EFF;
}

.milestone-documents {
  margin-top: 16px;
  padding: 12px;
  background-color: #f8f8f8;
  border-radius: 4px;
}

.milestone-documents ul {
  margin: 5px 0;
  padding-left: 20px;
}

.document-uploader {
  color: #909399;
  font-size: 12px;
  margin-left: 5px;
}

/* 学生文档列表样式 */
.student-documents-list {
  margin-top: 8px;
}

.document-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: white;
  border-radius: 6px;
  border: 1px solid #EBEEF5;
  transition: all 0.3s;
}

.document-item:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.document-item:last-child {
  margin-bottom: 0;
}

.document-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.document-info .el-icon-document {
  font-size: 20px;
  margin-right: 12px;
  color: #409EFF;
}

.document-info .el-icon-document.file-pdf {
  color: #F56C6C;
}

.document-info .el-icon-document.file-word {
  color: #409EFF;
}

.document-info .el-icon-document.file-excel {
  color: #67C23A;
}

.document-info .el-icon-document.file-ppt {
  color: #E6A23C;
}

.document-info .el-icon-document.file-zip {
  color: #909399;
}

.document-info .el-icon-document.file-image {
  color: #E6A23C;
}

.document-details {
  flex: 1;
}

.document-name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
  cursor: help;
}

.document-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.document-meta .file-size {
  color: #909399;
  font-size: 12px;
}

.document-meta .upload-time {
  color: #909399;
  font-size: 12px;
}

.document-actions {
  flex-shrink: 0;
}


.empty-data {
  padding: 30px 0;
  text-align: center;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 项目详细信息样式 */
.project-details-info {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #EBEEF5;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 0;
}

.info-label {
  font-weight: 500;
  color: #606266;
  min-width: 100px;
}

.info-value {
  color: #303133;
  flex: 1;
}

/* 图片预览样式 */
:global(.image-preview-dialog) {
  max-width: 80%;
}

:global(.image-preview) {
  text-align: center;
}

:global(.image-preview img) {
  max-width: 100%;
  max-height: 80vh;
}
</style>
